@charset "utf-8";
@import "main.less";


@media all and (max-width: 1366px) {
  body{
    background-color: @bodyColor;
    .padding_Remove;
    .margin_Remove;
    font-size: 14px;
  }
  ul{
    .ul_BaseStyle;
  }
  .a_removeStyle();
  a{
    color: @contentColor;
    text-decoration: none;
  }
  a:hover{
    color: @font_blue;
  }
  //body
  .article_details_body{
    background-color: white;
    .size(900px,auto);
    .margin_All(5rem,auto,0,auto);
  }
  //主体左边
  .body_left{
    .size(580px,auto);
    float: left;

  }
  //主体右边
  .body_right{
    .size(260px,auto);
    float: right;
  }
  //文章内容
  .article_content{
    .shadow(8px);
    background-color: white;
    .size(100%,auto);
    .padding_All(20px,20px,20px,20px);
    .radius(8px);
  }

  //发布评论
  .release_comments{
    .shadow(5px);
    .radius(8px);
    .size(100%,auto);
    background-color: white;
    .margin_All(45px);
    .padding_All(1px,20px,15px,20px);
    textarea{
      width: 100%;
      height: 180px;
    }


    button{
      .margin_All(5px,0,0,507px);
      .btn_default(fill,80px,30px);
    }

  }
  //评论列表
  .comments_list{
    .radius(8px);
    .shadow(5px);
    .margin_All(40px);
    .padding_All(1px,20px,0,20px);

    .size(100%,auto);
    background-color: white;
    position: relative;
    //评论列表
    .comments_ul{
      .margin_All(10px);
      color: @contentColor;
      //列表里面的每条元素
      li{
        .margin_All(15px);
        .padding_All(0,0,15px);
        border-bottom: #eee 1px solid;
        //评论人的头像
        img{
          width: 50px;
          height: 50px;
        }
        //评论时间和评论的用户名
        .comment_username,.comment_datetime{
          position: absolute;
          .margin_All(15px);
        }
        //评论时间
        .comment_datetime{
          right: 20px;
        }
        //所有p标签移除外边距
        p{
          .margin_Remove;
        }
        //评论内容
        p:nth-of-type(2){
          .margin_All(0,0,0,45px);
          letter-spacing: 2px;
        }
        //评论最后面的点赞和回复和举报
        p:nth-of-type(3){
          .margin_All(15px);
          height: 16px;
          //图标
          img{
            float: right;
            width: 16px;
            height: 15px;
          }
          span{
            line-height: 16px;
            display: block;
            float: right;
            text-align: center;
            padding-left: 2px;
            padding-right: 8px;
          }
        }
      }
    }
  }
  //个人信息
  .user_info{
    font-size: 12px;
    .radius(8px);
    .shadow(5px);
    background-color:white;
    .size(100%,auto);
    .info_top{
      .radius(8px);
      float: left;
      .user_profile{
        .padding_All(20px,0,0,15px);
        float: left;
        //发布者头像
        img{
          .size(50px,50px);
          .radius(50px);
          float: left;
        }
        //发布者用户名
        span{
          float: left;
          display: block;
          line-height: 50px;
          width: 110px;
          font-size: 12px;

        }
        //关注按钮
        button{
          font-size: 12px;
          .btn_default(empty,50px,20px);
          float: right;
          .margin_All(17px,20px,0,0);
        }
      }

    }
    .user_introduction{
      float: left;
      .size(100%,auto);
      .margin_All(20px);
      text-align: center;
      span{
        font-size: 12px;
        text-align: left;
        display: inline-block;
        width: 220px;
        border-bottom: #ccc 1px solid;
        padding-bottom: 20px;
        color: #999999;
        margin-bottom: 50px;
      }
    }
    //下半身
    .info_bottom{
      text-align: center;
      padding-bottom: 15px;
      ul{
        .size(100%,auto);
        text-align: center;
        li{
          display: inline-block;
          .margin_All(0,15px);
          //数量
          span{
            display: block;
            .margin_All(1px);
          }
        }
        li:nth-of-type(1){
          margin-left: 15px;
        }
      }
      .bottom_last{
        div{
          .margin_All(20px);
          display: inline-block;
          width: auto;
          .padding_All(3px,15px,3px,15px);
          background-color: #f2f2f2;
          .radius(30px);
        }
        div:nth-of-type(1){
          margin-right: 5px;
        }
        div:nth-of-type(2){
          margin-left: 5px;
        }
      }
    }
  }
  //相关文章
  .related_articles{
    .radius(8px);
    .shadow(5px);
    .size(100%,auto);
    background-color: white;

    .margin_All(40px);
    //相关文章的标题
    .article_title{
      .padding_All(10px,0,10px,0);
      .size(90%,auto);
      .margin_Auto;
      border-bottom: #cccccc 1px solid;
      div{
        display: inline-block;
      }
      .title_name{
        border-left: 5px solid #F6A51E;
        font-size: 18px;
        text-indent: 10px;
      }
      .exchange{
        width: 65px;
        float: right;
        line-height: 30px;
        background: url("../img/article_refresh.png") no-repeat right;
        text-align: left;
        font-size: 12px;

      }
    }
    //相关文章的内容
    .related_div{
      .size(90%,auto);
      .margin_Auto;
    }

    .related_ul{
      padding-top: 20px;
      li{
        .size(100%,60px);
        float: left;
        margin-bottom: 20px;
        .ul_right,.ul_left{
          display: inline-block;
        }
        //左边图片
        .ul_left{
          float: left;
          width: 100px;
          img{
            width: 100px;
            height: 60px;
            .radius(10px);
          }
        }
        //右边（文章名，作者名，评论量、浏览量）
        .ul_right{
          position: relative;
          float: right;
          width: 125px;
          height: 80px;
          color: #776e6e;
          span{
            display: block;
            .size(95%,auto);
            .text_overflow(2);
            font-size: 10px;
          }
          .author_info{
            position: absolute;
            bottom: 25px;
            width: 98%;
            font-size: 10px;
            .author_name{
              width: 92px;
              float: left;
              font-size: 9px;
              a{
                color: @font_blue;
              }
            }
            //评论量和浏览量的公用样式
            .article_commentNum,.article_pageNum{
              display: inline-block;
              width: 30px;
              float: right;
              color: #cccccc;
            }
            .article_commentNum{;
              background: url("../img/article_comment.png") no-repeat;
              text-indent: 18px;
            }
            .article_pageNum{;
              background: url("../img/article_page.png") no-repeat;
              background-position-x: 5px;
              background-position-y: -1px;
              background-size: 15px 15px;
              text-indent: 20px;
            }
          }

        }
      }
      .removeFloat{
        clear:both;
      }

    }

  }
  //推荐文章
  .recommend_article{
    .size(100%,617px);
    background-color: white;
    .margin_All(40px);
  }

  //文章内容的头部
  .content_top{
    .size(100%,auto);
    //导航
    p:nth-of-type(1){
      .margin();
      a{
        text-decoration: none;
      }
    }
    //标题
    p:nth-of-type(2){
      text-align: center;
      .margin_All(70px,auto,0px,auto);
      font-size: 28px;
      font-weight: 600;
      .size(auto,auto);
    }
    //文章信息
    .article_info{
      .margin_All(20px,auto,0,auto);
      .size(90%,20px);
      color: #999999;
      font-size: 12px;
      border-bottom: #cccccc 1px solid;
      padding-bottom: 10px;
      .article_auxiliary{
        .size(100%,20px);
        span{
          text-align: right;
        }
        ul{
          text-align: right;
          display: inline;
          float: right;
          li{
            float: right;
            height: 20px;
            img{
              .size(16px,16px);
            }
          }
        }
      }


    }

  }

  //文章内容的主体
  .content{
    .size(100%,auto);
    .margin_All(32px);
    img{
      width: 100%;
    }
  }

  //文章内容的底部
  .content_bottom{

    .margin_All(60px);
    .size(100%,120px);
    text-align: center;
    position: relative;
    .good,.collect{
      position: relative;
      width: 50px;
      height: 50px;
      background-color: #e1151b;
      display: inline-block;
      .radius(80px);
      color: white;
      font-size:10px;
      img{
        .margin_All(5px,0,0);
        width: 30px;
        height: 30px;
      }
      span{
        position: relative;
        bottom: 5px;
        .margin_All(0,0,15px);
      }
    }
    .good{
      .margin_All(0,20px,0,0);
    }
    .collect{
      .margin_All(0,0,0,20px);
    }

    .label{
      .margin_All(20px);
      ul{
        float: left;
        .margin_All(10px);
        font-size: 10px;
        li{
          float: left;
        }
        li:nth-of-type(1){
          .padding_All(5px);
        }
        li:not(:nth-of-type(1)){
          background-color: #F2F2F2;
          width:auto;
          height: 20px;
          .padding_All(1px,8px,1px,8px);
          .radius(50px);
          border: #CCCCCC 1px solid;
          line-height: 20px;
        }
      }
    }
  }

}